<template>
    <div>
      <div>
        相册名：<el-input v-model="py.name" style="width:150px"></el-input>
        用户id: <el-input v-model="py.uid" style="width:150px"></el-input>
        <button @click="addpy">添加相册</button>
      </div>
      <table border="1px">
        <tr>
          <td>相册名</td>
          <td>操作</td>
        </tr>
        <tr v-for="(i,index) in pylist" :key="index">
          <td><a href="#" @click="getpic(i.id)">{{ i.name }}</a></td>
          <td>
            <button @click="xiu(index)">修改</button>
            <button @click="del(i.id)">删除</button>
          </td>
        </tr>
      </table>
      <div>
        照片名：<el-input v-model="pic.name" style="width:150px"></el-input>
        照片路径: <el-input v-model="pic.url" style="width:150px"></el-input>
        相册id: <el-input v-model="pic.picid" style="width:150px"></el-input>
        用户id: <el-input v-model="pic.uid" style="width:150px"></el-input>
        <button @click="addpic">添加照片</button>
      </div>
      <div>
        相册id: <el-input v-model="pyy.id" style="width:150px"></el-input>
        相册名：<el-input v-model="pyy.name" style="width:150px"></el-input>
        用户id: <el-input v-model="pyy.uid" style="width:150px"></el-input>
        <button @click="updatepy(pyy.id)">修改相册</button>
      </div>
      <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :before-upload="upload"
  >
  <img :src="pic.url" width="150px">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<table border="1px">
        <tr>
          <td>照片名</td>
          <td>照片</td>
          <td>操作</td>
        </tr>
        <tr v-for="(i,index) in plist" :key="index">
          <td>{{ i.name }}</td>
          <td>{{ i.url }}</td>
          <td>
            <button @click="delp(i.id)">删除</button>
          </td>
        </tr>
      </table>
    </div>
</template>

<script>

export default {
  data(){
    return{
      pylist:[],
      plist:[],
      py:{
        id:'',
        name:'',
        uid:''
      },
      pyy:{
        id:0,
        name:'',
        uid:0
      },
      pic:{
        id:0,
        name:'',
        url:'',
        uid:0,
        picid:0
      }
    }
  },
  methods:{
    addpy(){
      this.axios.post('/addpictype',{name:this.py.name,uid:this.py.uid}).then(res=>{
        if (res.data.code==200){
          this.getpy()
        }
      })
    },
    getpy(){
      this.axios.get('/getallpictype').then(res=>{
        this.pylist = res.data.pylist
      })
    },
    del(id){
      this.axios.delete('/deletepictype?id='+id).then(res=>{
        if (res.data.code==200){
          this.getpy()
        }
      })
    },
    addpic(){
      this.axios.post('/addpic',{
        name:this.pic.name,
        url:this.pic.url,
        uid:this.pic.uid,
        picid:this.pic.picid
      }).then(res=>{
        if (res.data.code==200){
          alert(res.data.mes)
        }
      })
    },
    upload(file){
      var data = new FormData()
      data.append('file',file)
      this.axios.post('/upload',data).then(res=>{
        this.pic.url = "http://localhost:8000/" + res.data.url
      })
      
    },
    xiu(id){
      this.pyy = this.pylist[id]
    },
    updatepy(){
      this.axios.put('/updatepictype',this.pyy).then(res=>{
        if(res.data.code == 200){
          alert(res.data.mes)
        }
      })
    },
    delp(id){
      this.axios.delete('/deletepic?id='+id).then(res=>{
        if (res.data.code==200){
          alert(res.data.mes)
        }
      })
    },
    getpic(id){
      this.axios.get('/getpic?id='+id).then(res=>{
        this.plist = res.data.piclist
      })
    },
  },
  mounted(){
    this.getpy()
  }
}
</script>

<style>

</style>